<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    ul,
    li {
        list-style: none;
    }
    
    .list {
        width: 208px;
        margin: 50px auto;
        overflow: hidden;
    }
    
    .heard {
        width: 200px;
        height: 20px;
        border: 1px solid #000;
    }
    
    .list li {
        width: 200px;
        height: 20px;
        border: 1px solid #000;
        border-top: none;
        position: relative;
    }
    
    .one {
        margin-top: 50px;
    }
    
    input,
    button {
        float: left;
        height: 20px;
    }
    
    input {
        /* display: block; */
        width: 100px;
        height: 16px;
    }
    
    li button {
        float: right;
    }
</style>

<body>
    <!-- 作业内容：
        1.创建一个用户列表，数据自拟，每一条列表要有删除和修改功能。最后创建若干input和button，实现增加用户功能和查询用户功能，用jquery实现即可。
        2.编写一个计算器，要有加减乘除，求二次方，求余功能，结果保留两位小数即可。
        用jquery实现 -->

    <div class="list">
        <input type="text" class="inp1"><button class="btn1">增加</button>
        <input type="text" class="inp2" placeholder="请输入查询的用户名"><button class="find">查询</button>
        <div class="one">
            <div class="heard">用户列表</div>
            <ul>

            </ul>

        </div>
    </div>


    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            var a = true;
            var btn1 = $(".btn1");
            var find = $(".find")
            var inp1 = $(".inp1");
            var inp2 = $(".inp2")
            btn1.on("click", function() {
                var str = inp1.val().trim();
                inp1.val("");
                if (str.length == 0) {
                    return
                };
                var li = $('<li> ' + str + '</li>')
                var btn2 = $('<button class="two">修改</buttton>').css("float", "right")
                var btn3 = $('<button class="del">删除</buttton>').css("float", "right")
                li.append(btn2).append(btn3)
                $("ul").append(li);



                $("ul").on("click", ".del", function() {
                        // btn3.parent().remove()
                        $(this).parent().remove()
                    })
                    .on("click", ".two", function() {
                        if (!a) {
                            return
                        }
                        var inpt = $('<input type="text" placeholder="请输出新用户名">')

                        var btn4 = $("<button class='push'>确定</button>").css("float", "right")
                        btn4.appendTo($(this).parent());
                        inpt.appendTo($(this).parent()).css({
                            height: 16,
                            position: "absolute",
                            left: 0,
                            top: 0,
                        })
                        a = false
                        $("ul").on("click", ".push", function() {
                            a = true
                            var txt2 = $(this).siblings("input").val();
                            $(this).parent().html(txt2 + '<button class="two">修改</buttton>' +
                                '<button class="del">删除</buttton>');
                        })
                    })
            })
            find.on("click", function() {
                var txt3 = inp2.val() + "修改删除";
                $("li").each(function(i, e) {
                    // console.log($(e).text());
                    // console.log(txt3)
                    var txt4 = $(e).text()
                    if (txt3 == txt4) {
                        console.log("你查找的用户在第" + i + 1 + "行")
                    }
                })
            })
        })
    </script>

</body>

</html>